<template>
  <div class="margin-column">
    <up-row class="mid-row">
      <up-col span="4">
        <view class="left">{{ leftText }}</view>
      </up-col>
      <up-col span="4">
        <view class="mid">{{ midText }}</view>
      </up-col>
      <up-col span="4" @tap="emits('handleRightText')">
        <view class="right">{{ rightText }}</view>
      </up-col>
    </up-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
defineProps(['leftText', 'midText', 'rightText'])
const emits = defineEmits(['handleRightText'])
</script>

<style lang="scss" scoped>
$midHeight: 120rpx;
$index-title-font-size: 20rpx;

.margin-column {
  margin: 26rpx 0;
}
.mid-row {
  font-size: $index-title-font-size;
  > view {
    height: $midHeight;
    line-height: $midHeight;
  }
}
.left {
  text-align: left;
  font-family: 'American Typewriter';
  font-size: 24rpx;
}
.mid {
  font-size: 30rpx;
  font-weight: 500;
  text-align: center;
}
.right {
  font-size: 24rpx;
  text-align: right;
}
</style>
